<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首頁</title>
</head>
<body>
    <div id="app">
    <p>这个界面受保护，登录后你可以进已经被保护的界面.</p>
    <h1>用户名:{{username}}</h1>
    </div>
</body>
<script src="js/vuejs-2.5.16.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el: "#app", //id选择器获取对象，表示div闭合标签区域已经被vue接管

        data: {
          username:''
        },
        methods: {
            //查询用户信息
            findUserInfo:function () {
                //向后台发送请求，查询数据
                //ajax请求
                //箭头函数 === function(data){}
                axios.get("/user/findUserInfo").then(res => {
                    this.username = res.data;
            })
            }
        },
        created: function () {
            //自动调用方法
            this.findUserInfo();
        }
    })


</script>
</html>